var Area = {
	R:RenderTemplate,
	init: function(areas,selected){
		var con = $('#j-areaList');
		Area.searchInput = $('#search-info');
		Area.searchBtn = $('#searchBtn');
		Area.deleBtn = $('#deleInput');
		Area.bindSearchEvent(areas);
		// 用于创建节点的递归函数,如果以后要改成ajax的，删掉递归调用就可以了
		// 注意由于数据量比较大，这里的节点必须一次次的添加，不要把所有的节点全部拼好然后append，不然IE8会crash
		function create(tree,parent,ischild){
			for (var i=0; i < tree.length; i++) {
				var treeId = tree[i].id;
				if (treeId.indexOf(" ") >= 0){
					treeId = treeId.replace(/\s+/g,'');
					Area.bindSelectEvent($('#area_'+treeId).find('input'));
				}else{
					Area.bindSelectEvent($('#area_'+treeId).find('input'));
				}
				tree[i].id = treeId;
				// real code
				var parentId = parent.attr('id').split('_')[2];
				tree[i].parentId = parentId || '';
				var node = $('#area_'+tree[i].id);
				// 装载input和文字
				if (ischild) {
					parent.append($(Area.R(Area.cityTemplate,tree[i],'area')));	
					// 注册click事件
					Area.bindSelectClick($('#area_'+tree[i].id).find('[data-city="click"]'));
				}else{
					parent.append($(Area.R(Area.template,tree[i],'area')));
					// 注册input事件
					Area.bindSelectEvent($('#area_'+tree[i].id).find('input'));
                }
                node = $('#area_'+tree[i].id);
				// 遍历children
				var children = tree[i].children;
				if (children && children.length) {
					// 装载trigger
					var trigger = $(Area.R(Area.triggerTemplate,tree[i],'area')).appendTo(node.find('.area'));
					// 注册trigger事件
					Area.bindTriggerEvent(trigger[1]);
					// 创建用于容纳子节点的容器
					var childrenCon = $(Area.R(Area.childrenTemplate,tree[i],'area')).appendTo(node);
					// 递归调用，创建children
					create(children,childrenCon,true);
				}else{
					// 如果没有子节点，为了使节点排布整齐，放一个和trigger一样大小的容器在input前面
					//$(Area.placeholderTemplate).prependTo(node.find('.area'));
				}
            }
        }
		// 创建试图
		create(areas,con);
		// 如果有回填数据，完全模拟实际情况走一遍，不再单独写代码
		if (selected) {
			$(selected).each(function(i,item){
				// 判断是checkbox,还是div
				var ele = $('#select_'+item);
                if (ele.length == 0) {
                    return;
                }
                if (ele.attr('data-city') && ele.attr('class').split(' ')[1] != 'select-city') {
					ele.click();
					var showele = ele.parents('.j-area-con').find('.trigger');
					showele.attr('class').split(' ')[1] == 'shrinked-gray' ? showele.click() : '';
				}else{
					ele[0].checked = 'checked';
					ele.trigger('change');
                }
            });
        }
        $('#select_all').click(function(){
			var roots = $('#j-areaList input[data-parent=""]');
			roots.each(function(i,ele){
				ele.checked = 'checked';
			});
			roots.trigger('change');
		});
		$('#unselect_all').click(function(){
			var roots = $('#j-areaList input[data-parent=""]');
			roots.each(function(i,ele){
				ele.checked = false;
			});
			roots.trigger('change');
		});
	},
	// 由于本地没有备份树结构，所以所有的数据都需要从DOM结构中读取，这个函数就是用来格式化area对象的
	formatArea: function(id){
		//格式化自己的层级字符串，比如合肥，格式化完应该是 合肥市,安徽
		var parentsContent = $('#area_'+id).parents('.children').map(function(i,ele){
			return $(ele).prev().text();
		}).toArray();
		parentsContent.unshift($('#area_'+id+'>.area').text());
		return {
			name: $('#area_'+id).text(),
			id: id,
			parentId: $('#select_'+id).attr('data-parent'),
			rawTitle: parentsContent.join(',')
		};
	},
	bindTriggerEvent: function(ele){
		$(ele).click(function(){
			var id = this.id.split('_')[1],
			childrenCon = $('#child_of_'+id);
			if (childrenCon.css('display')!='none') {
				$(this).removeClass('extended-gray').addClass('shrinked-gray');
				childrenCon.prev('.area').removeClass('area-bg');
				childrenCon.slideUp();
			}else{
				$('#child_of_'+id+' .area').show();
				$(this).removeClass('shrinked-gray').addClass('extended-gray');
				childrenCon.prev('.area').addClass('area-bg');
				childrenCon.slideDown();
			}
		});
	},
	bindSelectEvent: function(ele){
		ele.change(function(){
			var id = ele.attr('id').split('_')[1];
			this.checked ? Area.addSelect(id,'input') : Area.removeSelect(id);
		});
	},
	bindSelectClick: function(ele){
		ele.click(function(){
			var id = ele.attr('id').split('_')[1];
			//选中添加select-city，否则相反
			if ($(this).attr('class').split(' ')[1]=='select-city') {
				$(this).removeClass('select-city');
				$(this).find('.corner').removeClass('corner-icon');
				Area.removeSelect(id);
			}else{
				$(this).addClass('select-city');
				$(this).find('.corner').addClass('corner-icon');
				Area.addSelect(id);
			}
		});
	},
	bindSearchEvent: function(GEO_LIST){
		var cb = function(){
			if ($('.search-result .search-area').length) {
				$('.search-result .search-area').remove();
            }
            var val = Area.searchInput.val();
			var parent =$('#areas_layout .search-result');
                var results = [];
                for(a in GEO_LIST){
                    if(GEO_LIST[a].name.indexOf(val) != -1){
                    	results.push(GEO_LIST[a]);
                    }else{
                        var child = GEO_LIST[a].children;
                        for(b in child){
                            if(child[b].name.indexOf(val) != -1){
                                results.push(child[b]);
                            }
                        }
                    }
                }
                for (var i = 0; i < results.length; i++) {
                    if ($('#'+results[i].id).length==0) {
                        $(Area.R(Area.searchresultTemplate,results[i],'area')).prependTo(parent);
                    }
                }
            parent.show();
                $('.search-area .add-area').click(function(){
                    var ele = $('#select_'+this.id);
                    if (ele.attr('data-city') && ele.attr('class').split(' ')[1] != 'select-city') {
                        ele.click();
                    }else{
                        ele[0].checked = 'checked';
                        ele.trigger('change');
                    }
                });
                $('.search-area,.add-all').mousemove(function(){
                    $(this).find('.add-area').addClass('add-hover');
                }).mouseout(function(){
                        $(this).find('.add-area').removeClass('add-hover');
                    });
                $('#addResults').click(function(){
                    $('.search-area .add-area').click();
                });
				if (Area.searchInput.val() == '') {
					$('.search-area').remove();
					$('.search-result').hide();
                }
        };
        Area.deleBtn.click(function(){
            Area.searchInput.val('');
            $('.search-area').remove();
            $('.search-result').hide();
        });
		Area.searchBtn.click(cb);
		Area.searchInput.keyup(cb);
	},
	addSelect: function(id,input){
		/* 
		添加共有以下几种逻辑：
		首先如果自己有父节点，需要判断父节点下面一层是否全部选中了，如果是，选中父节点，在选中区域移除所有父节点下面选中的地区，并将父节点添加到选中列表中,
		然后触发change事件继续往上层处理,如果并不是，那么将自己添加到选中区域，并删除所有子节点在选中区域的显示
		如果自己没有父节点,添加自己到选中区域，并移除所有子节点在选中区域的显示,合并以上代码逻辑，以下为代码实现
		*/
		// 判断自己是否有父节点：
		var parent = $('#area_'+id).parents('.j-area-con:first');
		if (parent.length) {
			// 如果有，首先查看自己下层区域是否全部被选中了
			var parentId = parent.attr('id').split('_')[1];
			var unselected = parent.find('.area[data-parent="'+parentId+'"]').length-parent.find('.select-city[data-parent="'+parentId+'"]').length;
			if (!unselected) {
				//如果是，移除所有parent的子区域在选中区的显示
				var ids = parent.find('.area[data-parent="'+parentId+'"]').map(function(i,item){
					return item.id.split('_')[1];
				});
				$('#selected_'+ids.toArray().join(',#selected_')).remove();
				// 把parent放到选中区中
				$(Area.R(
					Area.selectedTemplate,
					Area.formatArea(parentId),
					'area'
				)).appendTo($('.selected-con > .con')).find('.remove').click(function(){
					var id = this.id.split('_')[1];
					$('div#select_'+id).click();
				});
				// 触发parent的change事件继续往上处理
				$('#select_'+parentId)[0].checked = 'checked';
				$('#select_'+parentId).trigger('change');
				return;
            }
        }
        // 如果没有父节点或者父节点下面的子区域并没有被全部选中
		
		// 删除自己所有的子区域在选中区的显示
		var ids = $('#area_'+id+' input,#area_'+id+' [data-city="click"]').map(function(i,item){
			var id = item.id.split('_')[1];
			// 将子节点选中先
			if ($('div#select_'+id).length!=0) {
				if ($('div#select_' + id).attr('class')[1] != 'select-city') {
					$('div#select_'+id).addClass('select-city');
					$('div#select_'+id+' .corner').addClass('corner-icon');
                }
            }
            $('#select_'+id)[0].checked='checked';
			return id;
		});
		$('#selected_'+ids.toArray().join(',#selected_')).remove();
		// 将自己添加进选中区域
		
		$(Area.R(Area.selectedTemplate,Area.formatArea(id),'area')).appendTo($('.selected-con > .con')).find('.remove').click(function(){
			var id = this.id.split('_')[1];
			$('#select_'+id)[0].checked = false;
			$('#select_'+id).trigger('change');
			$('div#select_'+id).click();
		});
	},
	removeSelect: function(id){
		/*
			移除区域有以下逻辑
				首先判断自己是否有父节点
					如果有，则需要判断父节点是否是选中状态，
						如果是，将其选中状态去掉，移除他在选中区的显示，并将当前节点的所有兄弟节点添加到选中区，然后继续往上层parent走同样的逻辑,这个逻辑里面不能删除子节点，不然就错了
						如果不是，删除自己在选中区的显示,并删除自己子节点在选中区的显示
					如果没有，删除自己在选中区的显示,并删除自己子节点在选中区的显示
		*/
		// 判断自己是否有父节点
		var parent = $('#area_'+id).parents('.j-area-con:first');
		while (parent.length) {
			var parentId = parent.attr('id').split('_')[1];
			// 如果有,首先判断父节点是否被选中
			if ($('#select_'+parentId)[0].checked) {
				//如果是，首先去掉父节点的选中状态并删除父节点在选中区的显示
				$('#select_'+parentId)[0].checked = false;
				$('#selected_'+parentId).remove();
				// 然后把当前节点的兄弟节点添加到选中区
				$('.select-city[data-parent='+parentId+']').each(function(i,item){
					var id = item.id.split('_')[1];
					// 添加节点不要一次性添加，虽然性能比一个个要好，但是IE8扛不住
					$(
						Area.R(
							Area.selectedTemplate,
							Area.formatArea(id),
							'area'
						)
					).appendTo($('.selected-con > .con')).click(function(){
						var id = this.id.split('_')[1];
						if ($('input#select_'+id).length!=0) {
							$('input#select_'+id)[0].checked = false;
							$('input#select_'+id).trigger('change');
                        }
                        $('#select_'+id).click();
					});
				});
            }
            parent = parent.parents('.j-area-con:first');
        }
        // 如果没有parent或者parent没有被选中，删除自己和自己所有子节点在选中区的显示即可
		$('#selected_'+id).remove();
		var ids = $('#area_'+id+' input,#area_'+id+' [data-city="click"]').map(function(i,item){
			var id = item.id.split('_')[1];
			$('#select_'+id).removeClass('select-city');
			$('#select_'+id+' .corner').removeClass('corner-icon');
			return id;
		});
		$('#selected_'+ids.toArray().join(',#selected_')).remove();
	},
	save: function(){
		return $('.selected').map(function(){
			return this.id.split('_')[1];
		}).toArray().join(',');
	},
	template:				'<div id="area_[#=area.id#]" class="j-area-con">'+
								'<div class="area">'+
									'<span><input type="checkbox" name="" data-parent="[#=area.parentId#]" id="select_[#=area.id#]"></span>'+
									'<span>[#=area.name#]</span>'+
								'</div>'+
							'</div>',
	cityTemplate: 			'<div id="area_[#=area.id#]" class="children-area">'+
								'<div class="area" data-parent="[#=area.parentId#]" data-city="click" id="select_[#=area.id#]">'+
									'<span class="placeholder"></span>'+
									'<span>[#=area.name#]</span>'+
									'<span class="corner"></span>'+
								'</div>'+
							'</div>',
	triggerTemplate:		'<span class="double-arrow"></span><span class="trigger shrinked-gray" id="trigger_[#=area.id#]"></span>',
	placeholderTemplate:	'<span class="placeholder"></span>',
	childrenTemplate:		'<div id="child_of_[#=area.id#]" class="children" style="display:none"></div>',
	selectedTemplate:		'<div class="selected" id="selected_[#=area.id#]">'+
								'<span>[#=area.rawTitle#]</span>'+
								'<span class="remove close-tag" id="remove_[#=area.id#]"></span>'+
							'</div>',
	searchresultTemplate:	'<div class="search-area"><span>[#=area.name#]</span><span id="[#=area.id#]" class="add-area add-icon"></span></div>'
};